<template>
  <div class="container">
    <div class="left">
      <t-menu theme="light" defaultValue="item1" @change="handleselect">
        <template #logo>
          <img
            height="28"
            src="https://tdesign.gtimg.com/site/baseLogo-light.png"
            alt="logo"
          />
        </template>
        <t-menu-item value="item1">
          <template #icon>
            <icon name="app" />
          </template>
          店铺管理
        </t-menu-item>
        <t-menu-item value="item2">
          <template #icon>
            <icon name="usergroup" />
          </template>
          服务员管理
        </t-menu-item>
        <t-menu-item value="item3">
          <template #icon>
            <icon name="relativity" />
          </template>
          送餐员管理
        </t-menu-item>
        <t-submenu title="物流管理" value="item4">
          <template #icon>
            <icon name="server" />
          </template>
          <t-menu-item value="item4-1">
            <template #icon>
              <icon name="check-double" />
            </template>
            已完成
          </t-menu-item>
          <t-menu-item value="item4-2">
            <template #icon>
              <icon name="time" />
            </template>
            进行中
          </t-menu-item>
        </t-submenu>
        <t-submenu title="订单管理" value="item5">
          <template #icon>
            <icon name="system-code" />
          </template>
          <t-menu-item value="item5-1">
            <template #icon>
              <icon name="check-double" />
            </template>
            已完成
          </t-menu-item>
          <t-menu-item value="item5-2">
            <template #icon>
              <icon name="check" />
            </template>
            已发货
          </t-menu-item>
          <t-menu-item value="item5-3">
            <template #icon>
              <icon name="close" />
            </template>
            未发货
          </t-menu-item>
        </t-submenu>
      </t-menu>
    </div>

    <div class="body">
      <header>
        <t-head-menu theme="light" class="header">
          <span> 3121005314肖鹏天-外卖自助系统</span>
        </t-head-menu>
      </header>
      <div class="main">
        <div id="manageshop" v-show="active == 'item1'">
          <t-head-menu theme="light" class="sub-header">
            <span> 店铺管理</span>
            <div class="background">
              <img src="../assets/back1.svg" alt="" />
            </div>
          </t-head-menu>
          <manageshop></manageshop>
        </div>

        <div id="manageserver" v-show="active == 'item2'">
          <t-head-menu theme="light" class="sub-header">
            <span> 服务员管理</span>
            <div class="background">
              <img src="../assets/back2.svg" alt="" />
            </div>
          </t-head-menu>
          <manageserver></manageserver>
        </div>

        <div id="managedispatcher" v-show="active == 'item3'">
          <t-head-menu theme="light" class="sub-header">
            <span> 送餐员管理</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <managedispatcher></managedispatcher>
        </div>

        <div id="wuliuended" v-show="active == 'item4-1'">
          <t-head-menu theme="light" class="sub-header">
            <span> 已完成物流</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <wuliuended></wuliuended>
        </div>

        <div id="wuliuunended" v-show="active == 'item4-2'">
          <t-head-menu theme="light" class="sub-header">
            <span> 进行中物流</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <wuliuunended></wuliuunended>
        </div>
        <div id="ordersended" v-show="active == 'item5-1'">
          <t-head-menu theme="light" class="sub-header">
            <span> 已完成订单</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <ordersended></ordersended>
        </div>
        <div id="ordersending" v-show="active == 'item5-2'">
          <t-head-menu theme="light" class="sub-header">
            <span> 已发货订单</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <ordersending></ordersending>
        </div>

        <div id="orderunsend" v-show="active == 'item5-3'">
          <t-head-menu theme="light" class="sub-header">
            <span> 未发货订单</span>
            <div class="background">
              <img src="../assets/back3.svg" alt="" />
            </div>
          </t-head-menu>
          <orderunsend></orderunsend>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import manageshop from "@/components/ManageShop.vue";
import manageserver from "@/components/ManageServer.vue";
import managedispatcher from "@/components/ManageDispatcher.vue";
import wuliuended from "@/components/ManageWuliu/WuliuEnded.vue";
import wuliuunended from "@/components/ManageWuliu/WuliuUnended.vue";
import ordersended from "@/components/ManageOrder/BeSended.vue";
import ordersending from "@/components/ManageOrder/BeSending.vue";
import orderunsend from "@/components/ManageOrder/UnSend.vue";
import { Icon } from "tdesign-icons-vue";
export default {
  components: {
    manageshop: manageshop,
    manageserver: manageserver,
    managedispatcher: managedispatcher,
    wuliuended: wuliuended,
    wuliuunended: wuliuunended,
    ordersended: ordersended,
    ordersending: ordersending,
    orderunsend: orderunsend,
    Icon,
  },
  data() {
    return {
      active: "item1",
    };
  },
  methods: {
    handleselect(index) {
      console.log(index);
      this.active = index;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto;
}

.left {
  height: 95vh;
  border-right: 1px solid #eee;
}
.header {
  border-bottom: 1px solid #eee;
}
.header span {
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-size: 24px;
  font-weight: 800;
}
.sub-header {
  border-bottom: 1px solid #eee;
  height: 200px;
}
.sub-header span {
  position: absolute;
  bottom: 60px;
  font-size: 50px;
  font-weight: 600;
  color: #333;
}
.background {
  position: absolute;
  width: 100%;
  height: 150px;
  top: 0;
  left: 0;
}
.background img {
  position: absolute;
  width: 15%;
  right: 0;
  transform: translate(-40%, -20%);
}
.body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
</style>
